<!--  -->
<script setup lang='ts'>
import {onMounted } from 'vue'
import gsap from 'gsap';
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

function classicGunAn() {
    // 背景颜色变化
    gsap.to(".classicGun", {
        backgroundColor: "black",
        scrollTrigger: {
            // pinType: "fixed",
            pin: false,
            markers: false,
            trigger: ".classicGun",
            start: "top center-=500",
            end: "+=200",
            scrub: 1,
        } })
    //    盾牌图片变化
    gsap.to(".classicGunImg", {
        width: "12.8vw", margin: "0 40px", opacity: 1,
        scrollTrigger: {
                    pin: false,
                    markers: false,
                    trigger: ".classicGun",
                    start: "top top-=500",
                    end: "top top",
                    scrub: 1,
                } })
}

onMounted(() => {
    classicGunAn()
})
</script>
<template>
    <div class="classicGun">
        <ul>
            <li>经典</li>
            <li class="classicGunImg">
                <img src="../img/dp.webp" alt="">
            </li>
            <li>枪支</li>
        </ul>
    </div>
</template>

<style lang='scss' scoped>
.classicGun {
    height: 100vh;
    background-color:white; 
    display: flex;
    justify-content: center;
    align-items: center;
    ul{
        display: flex;
        align-items: center;
        justify-content: center;
        li{
            font-size: 7vw;
            font-weight: 300; 
            letter-spacing: 10px; 
        }
        li:nth-of-type(1){
            color: #0cebb9;
        }
        li:nth-of-type(2){
            width: 0px;
            height: 14.7vw;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            img{
                width: 100%;
            }
        }
        li:nth-of-type(3){
            color: white; 
            
        }
    }
}
</style>